<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>踮脚敲代码-layim查找</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="keywords" content="踮脚敲代码,layim查找" />
  <meta name="description" content="踮脚敲代码,layim查找" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
  <style>
    body{
      height: auto;
    }
    .search{
      width: 100%;
      height: 50px;
    }
    .ml_10{
      margin-left: 10px;
    }
    .findFriend,.findGroup{
      width: 100px;
      letter-spacing: 6px;
    }
    .recordList{
      padding: 0px;
      min-height: 365px;
    }
    .recordList .demo-list .layui-card{
      height:100px;
    }
    .avatar{
      width: 100px;
      float: left;
    }
    .avatar img{
      border-radius: 50%;
      width: 60px;
      height: 60px;
      margin: 20px;
    }
    .units{
      float: left;
      font-size: 12px;
      line-height: 20px;
      padding-top: 16px;
    }
    .line {
      padding: 0 10px;
      color: #ccc;
    }
    .icons{
      font-size: 12px;
      color: #888;
    }
    .addFriend{
      background-color: #7ADDD4;
    }

    .line-limit{
        width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .line-limit:hover{
        overflow: visible;
    }
  </style>
</head>

<body>
<div class="layui-card" style="margin-bottom:0px;">
  <div class="layui-tab layui-tab-brief layadmin-latestData">
    <ul class="layui-tab-title">
      <li class="layui-this">找人</li>
      <li>群聊</li>
    </ul>
    <div class="layui-tab-content" style="padding-bottom:0px;">
      <div class="layui-tab-item layui-show">
        <div class="layui-row layui-col-space15">
          <div class="layui-form">
            <div class="search">
              <div class="layui-col-md4">
                <input type="text" id="searchKey1" placeholder="请输入姓名或手机号搜索" autocomplete="off" class="layui-input">
              </div>
              <div class="layui-col-md4 ml_10">
                <select id="roleId" lay-verify="required" lay-filter="aihao">
                  <option value="">请选择职位</option>
                  <option value="1">超级管理员</option>
                  <option value="2">项目经理</option>
                  <option value="3">客服</option>
                </select>
              </div>
              <div class="layui-col-md2" style="margin-left:10px;">
                <button class="findFriend layui-btn">查找</button>
              </div>
            </div>
            <div class="recordList">
              <div id="friendList" class="layui-row layui-col-space10 demo-list"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-tab-item">
        <div class="layui-row layui-col-space15">
          <div class="layui-form">
            <div class="search">
              <div class="layui-col-md4">
                <input type="text" id="searchKey2" placeholder="请输入群名称搜索" autocomplete="off" class="layui-input">
              </div>
              <div class="layui-col-md2 ml_10">
                <button class="findGroup layui-btn">查找</button>
              </div>
            </div>
            <div class="recordList">
              <div id="groupList" class="layui-row layui-col-space10 demo-list"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<textarea title="用户模版" id="LAY_Friend" style="display:none;">
			{{# layui.each(d.data, function(index, item){ }}
				<div class="layui-col-sm4 layui-col-md4 layui-col-lg2">
			        <div class="layui-card" >
			        	<div class="avatar">
			          		<img class="layadmin-homepage-pad-img" src="{{ item.avatar }}" />
			        	</div>
			        	<div class="units">
				        	<p>{{ item.username }}<!--({{ item.userCode }})--></p>
				        	<p class="line-limit">{{ item.sign }}</p>
				        	<p>
					        	{{# if(item.isValid == 0){ }}
					        		<button userId="{{ item.id }}" class="addFriend layui-btn layui-btn-xs" style="background-color:#7ADDD4;">&nbsp;&nbsp;<strong>+</strong>&nbsp;&nbsp;好友&nbsp;&nbsp;</button>
					        	{{# } else { }}
					        		<span class="c_red">已经是好友</span>
					        	{{# } }}
				        	</p>
			        	</div>
			        </div>
		      	</div>
		  	{{# }); }}
		</textarea>

<textarea title="群聊模版" id="LAY_Group" style="display:none;">
			{{# layui.each(d.data, function(index, item){ }}
				<div class="layui-col-sm4 layui-col-md4 layui-col-lg2">
			        <div class="layui-card" >
			        	<div class="avatar">
			          		<img class="layadmin-homepage-pad-img" src="{{ item.avatar }}" />
			        	</div>
			        	<div class="units">
			        		<p style="font-size: 14px;">{{ item.groupname }}</p>
			        		<p><i class="layui-icon layui-icon-group icons"></i> {{ item.userCount }}<span class="line">|</span><i class="layui-icon layui-icon-friends icons"></i>{{ item.userName }}</p>
				        	<p>
					        	{{# if(item.isJoin == 0){ }}
					        		<button groupId="{{ item.groupId }}" avatar="{{item.avatar}}" groupname="{{ item.groupname }}" class="addGroup layui-btn layui-btn-xs" style="background-color:#7ADDD4;">&nbsp;&nbsp;<strong>+</strong>&nbsp;&nbsp;加群&nbsp;&nbsp;</button>
					        	{{# } else { }}
					        		<span class="c_red">已经是群成员</span>
					        	{{# } }}
				        	</p>
			        	</div>
			        </div>
		      	</div>
		  	{{# }); }}
		</textarea>
</body>



<script src="../../../../layui.js?v=1"></script>

<script src="../../../../../js/path.js"></script>
<!--您的Layui代码start-->
<script type="text/javascript">
    var form, layer, laytpl, $ ,layim;

    layui.use(['laytpl', 'form', 'element','layim'], function() {
        form = layui.form;
        layer = layui.layer;
        laytpl = layui.laytpl;
        $ = layui.jquery;
        layim =layui.layim
        /**
         * 添加好友
         */
        $(document).on('click', '.addFriend', function() {
            var myBut = $(this);
            var parent = myBut.parent().parent();
            var find = parent.find("p").eq(0);
            var userId = myBut.attr("userId");
//            layer.msg('好友申请已发送，请等待对方确认', { icon: 1 });
//            // 修改按钮
//            myBut.parent().html('<span class="c_red">已经提交申请</span>');

            // 弹出添加好友验证界面
            layim.add({
                type: 'friend'
                ,username: find.text()
                ,avatar:parent.parent().parent().find("img").attr("src")
                ,submit: function(group, remark, index){
                    var userids = localStorage.getItem("userid")
                    $.post(baseUrl+'user/addUser', {
                        toId:userId,
                        userId:userids,
                        groupId:group,
                        content:remark
                    }, function(res){
                      if(res.code != 0){
                        return layer.msg(res.msg);
                      }
                      layer.msg('好友申请已发送，请等待对方确认', {
                        icon: 1
                        ,shade: 0.5
                      }, function(){
                        layer.close(index);
                      });
                      myBut.html("好友申请已提交");
                        myBut.attr("disabled",true)
                    });
                }
            });
        });


        /**
         * 加入群聊
         */
        $(document).on('click', '.addGroup', function() {
            var myBut = $(this);
            var groupId = myBut.attr("groupId");
            var avatar = myBut.attr("avatar");
            var groupname = myBut.attr("groupname");

//            layer.msg('申请已发送，请等待管理员确认', { icon: 1 });
//            // 修改按钮
//            myBut.parent().html('<span class="c_red">已经提交申请</span>');
            //添加好友到群组，这里没有做群主确认，直接加入成功
            $.post(baseUrl+'user/addUserToGroup', {
                groupid:groupId,
                uid:localStorage.getItem("userid")
            }, function(res){
                if(res.code != 0){
                    return layer.msg(res.msg);
                }
//                layim.parent().addList({
//                    type: 'group' //列表类型，只支持friend和group两种
//                    ,avatar: avatar //群组头像
//                    ,groupname: groupname //群组名称
//                    ,id: res.data //群组id
//                })
                parent.layui.layim.addList({
                    type: 'group' //列表类型，只支持friend和group两种
                    ,avatar: avatar //群组头像
                    ,groupname: groupname //群组名称
                    ,id: groupId //群组id
                });
                return layer.msg("加群成功！");
            });
            // 弹出加入群聊验证界面
            /*layim.add({
        type: 'group'
        ,username: group.groupName
        ,avatar: group.avatar
        ,submit: function(a, remark, index){
            // 推送一个消息
            var msg = {
                    type: "addMsgbox",
                    sendType: 2,
                    fromId: loginUserId,
                    toId: group.userId,
                    groupId: group.groupId,
                    remark: remark
                }
            websocket.send(JSON.stringify({
                        type: 'chatMsgbox' // 随便定义，用于在服务端区分消息类型
                        ,data: msg
                  }));
        }
    });*/
        });
        /**
         * 查找用户按钮点击事件
         */
        $(document).on('click', '.findFriend', function() {
            bindingFriend();
        });
        /**
         * 查找群聊按钮点击事件
         */
        $(document).on('click', '.findGroup', function() {
            bindingGroup();
        });

        // 初始化用户群聊信息
        bindingFriend();
        bindingGroup();
    });

    /**
     * 重新绑定用户列表
     */
    function bindingFriend(){
        var control = $('#friendList');
        control.empty();
//        var json = {
//            "code": 0,
//            "count": null,
//            "data": [
//                {
//                    "avatar": "http://tva4.sinaimg.cn/crop.0.1.1125.1125.180/475bb144jw8f9nwebnuhkj20v90vbwh9.jpg",
//                    "isValid": 0,
//                    "roleNames": "超级管理员",
//                    "userCode": "18818880003",
//                    "userId": 3,
//                    "userName": "用户6011"
//                }, {
//                    "avatar": "http://tva2.sinaimg.cn/crop.1.0.747.747.180/633f068fjw8f9h040n951j20ku0kr74t.jpg",
//                    "isValid": 0,
//                    "roleNames": "项目经理",
//                    "userCode": "18818880004",
//                    "userId": 4,
//                    "userName": "用户6019"
//                }, {
//                    "avatar": "http://tva3.sinaimg.cn/crop.0.0.750.750.180/5033b6dbjw8etqysyifpkj20ku0kuwfw.jpg",
//                    "isValid": 0,
//                    "roleNames": "客服",
//                    "userCode": "18818880012",
//                    "userId": 12,
//                    "userName": "陈雄"
//                }, {
//                    "avatar": "http://tva3.sinaimg.cn/crop.0.0.750.750.180/5033b6dbjw8etqysyifpkj20ku0kuwfw.jpg",
//                    "isValid": 1,
//                    "roleNames": "客服",
//                    "userCode": "18818880013",
//                    "userId": 13,
//                    "userName": "李日红"
//                }, {
//                    "avatar": "http://tva1.sinaimg.cn/crop.0.0.200.200.50/006q8Q6bjw8f20zsdem2mj305k05kdfw.jpg",
//                    "isValid": 0,
//                    "roleNames": "客服",
//                    "userCode": "18818880014",
//                    "userId": 14,
//                    "userName": "钟志丽"
//                }, {
//                    "avatar": "http://tva2.sinaimg.cn/crop.0.0.199.199.180/005Zseqhjw1eplix1brxxj305k05kjrf.jpg",
//                    "isValid": 0,
//                    "roleNames": "客服",
//                    "userCode": "18818880015",
//                    "userId": 15,
//                    "userName": "黄宇敏"
//                }, {
//                    "avatar": "http://tva3.sinaimg.cn/crop.0.0.750.750.180/5033b6dbjw8etqysyifpkj20ku0kuwfw.jpg",
//                    "isValid": 0,
//                    "roleNames": "客服",
//                    "userCode": "18818880016",
//                    "userId": 16,
//                    "userName": "钟杰怡"
//                }, {
//                    "avatar": "http://tva2.sinaimg.cn/crop.0.0.640.640.180/648fbe5ejw8ethmg0u9egj20hs0ht0tn.jpg",
//                    "isValid": 0,
//                    "roleNames": "客服",
//                    "userCode": "18818880017",
//                    "userId": 17,
//                    "userName": "蔡凤鸣"
//                }, {
//                    "avatar": "http://tva1.sinaimg.cn/crop.0.23.1242.1242.180/8693225ajw8fbimjimpjwj20yi0zs77l.jpg",
//                    "isValid": 0,
//                    "roleNames": "客服",
//                    "userCode": "18818880018",
//                    "userId": 18,
//                    "userName": "温雪媚"
//                }
//            ],
//            "msg": "操作成功！"
//        };
//        var list = json.data;
//        if(list != null){
//            // 数据转化为html格式
//            var html = laytpl(LAY_Friend.value).render({
//                data: list
//            });
//            control.html(html);
//        }else{
//            control.append('<div style="color:#ccc; margin:150px 350px;">没有找到符合搜索条件的用户</div>');
//        }


        var data = {
//                roleId: $("#roleId").val(),
                name: $("#searchKey1").val(),
                userid:localStorage.getItem("userid"),
                type:0
            };
        $.ajax({
            type: "post",
            url: baseUrl+'user/getUserOrGroupsByCondition',
            async: true,// 异步为true
            data: data,
            success: function (data) {
                var json = data;
                var list = json.data;
                if(list != null){
                    // 数据转化为html格式
                        var html = laytpl(LAY_Friend.value).render({
                            data: list
                        });
                        control.html(html);
                }else{
                    control.append('<div style="color:#ccc; margin:150px 350px;">没有找到符合搜索条件的用户</div>');
                }
            }
        });
    }

    /**
     * 重新绑定群聊列表
     */
    function bindingGroup(){
//        layer.msg('开始绑定群聊列表');
        var control = $('#groupList');
        control.empty();
//        var json = {
//            "code": 0,
//            "count": null,
//            "data": [
//                {
//                    "avatar": "http://tva2.sinaimg.cn/crop.0.0.199.199.180/005Zseqhjw1eplix1brxxj305k05kjrf.jpg",
//                    "groupId": 1,
//                    "groupName": "IM群聊",
//                    "isJoin": 0,
//                    "userCount": 15,
//                    "userId": 1,
//                    "userName": "小升"
//                }, {
//                    "avatar": "http://tva1.sinaimg.cn/crop.0.0.200.200.50/006q8Q6bjw8f20zsdem2mj305k05kdfw.jpg",
//                    "groupId": 18,
//                    "groupName": "热血三角裤",
//                    "isJoin": 1,
//                    "userCount": 2,
//                    "userId": 1,
//                    "userName": "小升"
//                }
//            ],
//            "msg": "操作成功！"
//        };
        var data = {
//                roleId: $("#roleId").val(),
            name: $("#searchKey2").val(),
            userid:localStorage.getItem("userid"),
            type:1
        };
        $.ajax({
            type: "post",
            url: baseUrl+'user/getUserOrGroupsByCondition',
            async: true,// 异步为true
            data: data,
            success: function (data) {
                var json = data;
                var list = json.data;
                if(list != null && list.length>0){
                    // 数据转化为html格式
                    var html = laytpl(LAY_Group.value).render({
                        data: list
                    });
                    control.html(html);
                }else{
                    control.append('<div style="color:#ccc; margin:150px 350px;">没有找到符合搜索条件的群聊</div>');
                }
            }
        });
//        var list = json.data;
//        if(list != null){
//            // 数据转化为html格式
//            var html = laytpl(LAY_Group.value).render({
//                data: list
//            });
//            control.html(html);
//        }else{
//            control.append('<div style="color:#ccc; margin:150px 350px;">没有找到符合搜索条件的群聊</div>');
//        }


        /*var data = {
                searchKey: $("#searchKey2").val()
            };
        $.ajax({
            type: "get",
            url: "../json/group.json",
            async: true,// 异步为true
            data: data,
            success: function (data) {
                var json = data;
                var list = json.data;
                if(list != null){
                    // 数据转化为html格式
                    var html = laytpl(LAY_Group.value).render({
                        data: list
                    });
                    control.html(html);
                }else{
                    control.append('<div style="color:#ccc; margin:150px 350px;">没有找到符合搜索条件的群聊</div>');
                }
            }
        });*/
    }


</script>
</body>

</html>